<template>
  <hoseVue :obj="obj">
    <SearchVue :iptObj="iptObj"></SearchVue>
    <div class="container">
      <div class="left">
        <div>
          <span>接单时间：</span>
          <el-time-select
            v-model="startTime"
            :max-time="endTime"
            class="mr-4"
            placeholder="Start time"
            start="00:00"
            step="00:15"
            end="23:99"
          />
          <span>至</span>
          <el-time-select
            v-model="endTime"
            :min-time="startTime"
            placeholder="End time"
            start="08:30"
            step="00:15"
            end="18:30"
          />
        </div>
        <div>
          <span>接单范围：</span>
          <el-select v-model="distance" placeholder="1km">
            <el-option label="1km" :value="100" @click="Dist" />
            <el-option label="2km" :value="200" @click="Dist" />
            <el-option label="3km" :value="300" @click="Dist" />
            <el-option label="4km" :value="500" @click="Dist" />
            <el-option label="5km" :value="800" @click="Dist" />
          </el-select>
        </div>
        <div>
          <span>服务小区：</span>
          <el-transfer :titles="['范围内小区', '已选择小区']" v-model="value" :data="data" @change="Change" />
        </div>
      </div>
      <div class="right">
        <div id="map-container">
          <InitMap :flag="false" :scope1="Scope" ref="Map"></InitMap>
        </div>
        <div>
          <el-button type="primary" plain @click="ChongZhi">重置</el-button>
          <el-button @click="centerDialogVisible = true" type="primary">保存</el-button>
        </div>
      </div>
    </div>
    <el-dialog :show-close="false" v-model="centerDialogVisible" width="30%" align-center>
      <div class="zhe">
        <el-icon>
          <CircleCheckFilled />
        </el-icon>
        <span>修改成功</span>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            type="primary"
            @click="centerDialogVisible = false"
            color="rgba(37, 178, 86, 0.579)"
            size="large"
          >确认</el-button>
        </span>
      </template>
    </el-dialog>
  </hoseVue>
</template>

<script setup>
import hoseVue from "../../components/hose.vue";
import SearchVue from "../../components/Search.vue";
// 引入地图
import InitMap from "../../components/InitMap.vue";
import { ref } from "vue";

const centerDialogVisible = ref(false);
const arr = ref([
  "贵州省贵阳市观山湖区金朱东路",
  "贵州省贵阳市观山湖区通宝巷",
  "贵州省贵阳市观山湖区通元街",
  "贵州省贵阳市观山湖区广惠街",
  "贵州省贵阳市观山湖区数博大道长岭北路",
  "贵州省贵阳市观山湖区廷南路",
  "贵州省贵阳市观山湖区铭东路"
]);
// 显示范围的区域地图
const Arr = ref([]);

// 地图组件标签
const Map = ref(null);
const data = ref([]);
const value = ref([]);
// 接单范围
const Scope = ref();
// 点击重置
const ChongZhi = () => {
  Map.value.abd(arr.value);
};
const generateData = () => {
  for (let i = 0; i <= arr.value.length - 1; i++) {
    data.value.push({
      key: i,
      label: arr.value[i],
      disabled: false
    });
  }
  return data;
};

generateData();

const startTime = ref("");
const endTime = ref("");
const distance = ref();
const iptObj = {
  title: "接单管理",
  userBool: false,
  telrBool: false, //电话搜索框是否显示
  regionBool: false, //选项框是否显示
  BtnBool: false
};
const obj = {
  flag: false,
  name: "充值",
  price: "钱包余额:1569.00"
};
// 点击接单范围
const Dist = () => {
  Scope.value = distance.value;
  Map.value.abd(Arr.value);
};
// 右侧列表元素变化时触发
const Change = tmp => {
  // 每次触发时给范围数组赋值空
  Arr.value = [];
  // console.log(111, tmp);
  arr.value.forEach((item, index) => {
    tmp.forEach(TmpItem => {
      if (index == TmpItem) {
        Arr.value.push(item);
      }
    });
  });
  // console.log(Arr.value);
  Map.value.abd(Arr.value);
};
</script>

<style scoped>
.container {
  /* padding: 30px; */
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #cccccc;
  box-sizing: border-box;
  padding-top: 30px;
  height: calc(100% - 60px);
  /* height: ; */
}
.left {
  margin-right: 30px;
}
.left > div {
  display: flex;
  align-items: center;
  margin: 20px 0;
}
.left > div > :nth-child(1) {
  font-weight: bold;
}
.left > div:nth-child(1) > :nth-child(3) {
  margin: 0 20px;
}
.right {
  flex: 1;
}
.right > div:nth-child(1) > img {
  width: 400px;
  height: 400px;
  margin-bottom: 30px;
}
.right > div:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: end;
}
.right > div:nth-child(2) {
  margin: 0 10px;
}
.dialog-footer {
  display: flex;
  justify-content: center;
}
.zhe {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.zhe > :nth-child(1) {
  font-size: 50px;
  margin: 20px 0 20px 0;
  color: rgba(37, 178, 86, 0.579);
}
.zhe > :nth-child(2) {
  font-weight: bold;
  margin-bottom: 40px;
}
#map-container {
  width: 500px;
  height: 400px;
}
</style>
